<template>
  <!-- 不支持webrtc功能提示的组件 -->
  <div>
    <div class="qrcodetitle">提示</div>
    <vue-qr :text="url" :size="180" :margin="0"></vue-qr>
    <div style="text-align:left;marginTop:20px;">
      当前浏览器不支持该服务，请复制链接前往Chrome、Firefox等浏览器下使用；<br>
      注：<span style="color:#FE2525;">iOS设备</span>请在Safari浏览器下使用；微信内请点击右上角···选择在浏览器打开。
    </div>
    <div class="copyBtn" slot="copybtnslot" @click="copy">复制链接</div>
  </div>
</template>

<script>
import vueQr from 'vue-qr'

export default {
  data () {
    return {}
  },

  props: {
    url: {
      type: String,
      default: ''
    }
  },

  components: {
    vueQr
  },

  methods: {
    /** 复制 */
    copy () {
      var type = '', msgText = ''
      this.$copyText(this.url)
        .then(function (e) {
          type = 'success'
          msgText = '复制成功！'
        }, function (e) {
          type = 'error',
          msgText = '复制失败！'
        })
      setTimeout(() => {
        this.$notify({
          title: '提示',
          type: type,
          message: msgText
        })
      }, 0);
    }
  }
}
</script>
<style lang='scss' scoped>
.close_mask {
  position: absolute;
  width: 25px;
  height: 25px;
  display: inline-block;
  right: -10px;
  top: -10px;
  z-index: 2;
  cursor: pointer;
}
.qrcodetitle {
  padding: 20px 0;
  font-size: 16px;
  color: #999;
}
.copyBtn {
  width: 110px;
  height: 40px;
  line-height: 40px;
  background: #2e9cf1;
  border-radius: 5px;
  color: #fff;
  margin: 20px auto;
  font-size: 14px;
  cursor: pointer;
}
</style>